<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>宠爱有家店铺管理系统</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js"></script>
     <script src="js/city-picker.data.js"></script>
    <script src="js/city-picker.js"></script>
    <style>
		.con4 {
			width: 300px;
			float:left;
			height: auto;
			overflow: hidden;
			margin: 20px auto;
			color: #FFFFFF;
		}
		
		.con4 .btn {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #d8b49c;
			display: block;
			font-size: 16px;
			border-radius: 5px;
		}
		
		.upload {
			float: left;
			position: relative;
		}
		
		.upload_pic {
			display: block;
			width: 100%;
			height: 40px;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			border-radius: 5px;
		}
		
		#cvs {
			border: 1px solid #000;
			margin: 20px 0 20px 50px;
		}
        .city-picker-span { width:300px;}
        #edit-info{
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #aaa;
            border-radius: 5px;
            text-align: center;
        }
        .freeze-td{

        }
        .freeze-td-disabled{
            pointer-events: none;
            opacity: 0.5;
        }

    </style>
</head>

<body >
<div class="headiv" style="background: #000000;">
    <div class="logotag">
      <h1>
      	<font size="" color="white">宠爱有家店铺管理</font>
      </h1>
        <b class="line"></b>
    </div>
    
    
</div>

<div class="messagebox">
    <div class="messageleft">
        <ul class="Fstage">
            <li><a href="#"><em class="e1"></em>店铺管理<div class="clear"></div></a>
                <ul class="Tstage" >
                    <li><a href="账号管理.html">账号管理</a></li>
                    <li><a href="上架新品.html">上架新品</a></li>
                    <li><a href="物流详情.html">物流详情</a></li>
                    <li><a href="订单详情.html">历史订单</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <div class="messageright">
        <div class="formpage">
            <div class="clear" style="height:20px"></div>
            <h2>账户信息</h2>
            <div class="clear" style="height:30px"></div>

            <span class="information">
            	<div class="clear" style="height:10px"></div>
            	<div class="con4">
            		<canvas id="cvs" width="200" height="200"></canvas> <span class="btn upload">上传头像<input type="file" class="upload_pic" id="upload" /></span>
            	</div>

                <!--增删信息模板
                    <tr>
                        <td>电子邮箱：</td>
                        <td><div class="freeze-td"><input class="textput" placeholder="请输入店铺联系邮箱" type="text" value="123@gmail.com"/></div></td>
                    </tr>
                -->
                <form>
                    <table>
                        <tr>
                            <!--店铺名或者登陆名等。自行修改-->
                            <td>宠物名：</td>
                            <td colspan="2"><div class="freeze-td"><input class="textput" placeholder="请输入宠物名" type="text" /></div></td>
                           
                        </tr>

                        <tr>
                            <td>宠物品种：</td>
                            <td><div class="freeze-td"><input class="textput" placeholder="请输入宠物品种" type="text" /></div></td>
                         </tr>
                        <tr>
                            <td>性别：</td>
                            <td><div class="freeze-td"><label>母<input name="sex" type="radio"></label><label>公<input checked name="sex" type="radio"></label></div></td>

                        </tr>

                        <tr>
                            <td>生日：</td>
                            <td><div class="freeze-td"><input class="textput" type="date" value="2019-09-05"/></div></td>
                        </tr>

                        <tr>
                            <td>所在地区：</td>
                            <td class="address"><div class="freeze-td"><input class="addr" data-toggle="city-picker" id="city-picker3" readonly type="text" value="海南省/三沙市/中沙群岛的岛礁及其海域"/></div></td>
                            <td><p class="wrrong"></p></td>
                        </tr>

                        <tr>
                            <td>QQ：</td>
                            <td><div class="freeze-td"><input class="textput" type="text" placeholder="123456"/></div></td>
                            <td><p class="wrrong"></p></td>
                        </tr>

                        <tr>
                            <td>阿里旺旺账号：</td>
                            <td><div class="freeze-td"><input class="textput" type="text" placeholder="阿里旺旺"/></div></td>
                            <td><p class="wrrong"></p></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td colspan="2"><button type="button" class="greenbtn submit-btn" data-target=".bs-example-modal-sm" data-toggle="modal">提交保存</button></td>
                        </tr>
                    </table>
                </form>
                <div class="clear"></div>
            </span>
            <div class="clear" style="height:50px"></div>

            <button aria-label="Close" class="close" data-dismiss="alert" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
    <div class="clearh" style="height:0"></div>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="alert-tips">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="mySmallModalLabel">温馨提示</h4>
            </div>
            <div class="modal-body">
                <text class="modal-text"></text>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</body>
</html>
<script>
    $(".Fstage>li").click(function(){
        if($(this).children("ul").hasClass("Tstage"))
            $(this).siblings("li").children("ul").hide();
        $(this).children("ul").slideDown();
    });
    $('.freeze-td').addClass('freeze-td-disabled');

    $('#edit-info').click(function () {
console.log('000')
        $('.freeze-td').removeClass('freeze-td-disabled');
    });

    $('.submit-btn').click(function () {
        var judge = $('.freeze-td').hasClass('freeze-td-disabled');
        console.log(judge);
        if(judge){
            $('.modal-text').html('您未作修改，请修改后再试');
            return;
        }else {
            $('.modal-text').html('提交成功，正在等待审核中...');
        }
        $("#alert-tips").show();
        $('.freeze-td').addClass('freeze-td-disabled');
    })
	<script>
		//获取上传按钮
		var input1 = document.getElementById("upload");
		if(typeof FileReader === 'undefined') {
			//result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
			input1.setAttribute('disabled', 'disabled');
		} else {
			input1.addEventListener('change', readFile, false);
	 
		}
	 
		function readFile() {
			var file = this.files[0]; //获取上传文件列表中第一个文件
			if(!/image\/\w+/.test(file.type)) {
				//图片文件的type值为image/png或image/jpg
				alert("文件必须为图片！");
				return false;
			}
			// console.log(file);
			var reader = new FileReader(); //实例一个文件对象
			reader.readAsDataURL(file); //把上传的文件转换成url
			//当文件读取成功便可以调取上传的接口
			reader.onload = function(e) {
	 
				var image = new Image();
				// 设置src属性 
				image.src = e.target.result;
				var max = 200;
				// 绑定load事件处理器，加载完成后执行，避免同步问题
				image.onload = function() {
					// 获取 canvas DOM 对象 
					var canvas = document.getElementById("cvs");
					// 获取 canvas的 2d 环境对象, 
					var ctx = canvas.getContext("2d");
					// canvas清屏 
					ctx.clearRect(0, 0, canvas.width, canvas.height);
	 
					ctx.drawImage(image, 0, 0, 200, 200);
					
				};
			}
		};
	</script>

</script>
